import React from 'react';
import {
  View,
  Text,
  Button,
  Platform,
  ScrollView,
  StyleSheet,
} from 'react-native';
import {useHeaderHeight} from '@react-navigation/elements';
import {useNavigation} from '@react-navigation/native';

import {Header} from '@react-navigation/elements';

import {getDefaultHeaderHeight} from '@react-navigation/elements';
import {
  useSafeAreaFrame,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';

import {useMount} from 'ahooks';
import style from './style.less';

import ToggleDrawer from '../../ToggleDrawer';

const HeaderTitle = ({height, goBackEl, ...otherProps}) => {
  return (
    <View
      style={[
        style.HeaderTitle,
        {
          height,
        },
      ]}>
      {goBackEl}
      <Text>YYY</Text>
    </View>
  );
};
const rPPath = 'OPlayer';
export default ({leftNavIsOpen, setLeftNavIsOpen}) => {
  const navigation = useNavigation();
  const frame = useSafeAreaFrame();
  const insets = useSafeAreaInsets();
  const headerHeight = getDefaultHeaderHeight(frame, false, insets.top);
  useMount(() => {
    navigation.setOptions({
      headerShown: false,
      // headerTransparent: true,
      // headerBackground: () => (
      //   <BlurView
      //     tint="light"
      //     intensity={100}
      //     style={StyleSheet.absoluteFill}
      //   />
      // ),
    });
  });
  return (
    <View style={{flex: 1}}>
      <Header
        // headerShadowVisible={false}
        headerLeft={() => <Text>OK</Text>}
        title="ABCDEF"
        // headerBackground={(props) => (
        //   <View style={{backgroundColor: '#ccc',height: 1}} />
        // )}
        headerStyle={{
          elevation: 1,
          shadowOpacity: 3,
          borderBottomWidth: 1,
        }}
      />
      <ScrollView style={{flex: 1}}>
        <Text>视频</Text>
        <Button
          title="Audio"
          onPress={() => {
            navigation.navigate(`${rPPath}/Audio`);
          }}
        />
      </ScrollView>
    </View>
  );
};
